<template>
  <div>
    <Head :nowRouter="nowRouter" v-if="isHeadFoot"></Head>
    <div class="box1" v-if="isHeadFoot"></div>
    <div class="content">
      <router-view></router-view>
    </div>
    <Foot v-if="isHeadFoot"/>
  </div>
</template>

<script setup>
import Foot from '@/components/Foot.vue';
import Head from '@/components/Head.vue';
import { ref, watch } from "vue";
import { useRouter, useRoute } from 'vue-router';

const router = useRouter()
const route = useRoute()
const nowRouter = ref('/today')
const isHeadFoot = ref(true)

// 更可靠的监听方式：使用 watch + 路由名称判断
watch(
  () => route.name,
  (newVal) => {
    // 根据路由名称判断是否显示 Header/Footer
    isHeadFoot.value = newVal !== 'details' // 假设详情页路由名称为 'details'
    nowRouter.value = route.path
  },
  { immediate: true } // 立即执行一次初始化
)
</script>

<style lang="less" scoped>
/* 原有样式保持不变 */
.box1 {
  height: 56px;
  width: 100%;
}
.box2 {
  height: 56px;
  width: 100%;
}

.content {
  margin-bottom: 64px;
}
</style>